<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
    <link rel="stylesheet" type="text/css" href="../../css/mui.css" />
    <link href="../../css/style.css" rel="stylesheet" type="text/css">
    <title>发布信息</title>
    <style>
        body {
            background: #fff!important;
        }
        
        .mui-icon-arrowleft {
            color: #000!important;
        }
        
        .mui-title {
            color: #000!important;
        }
        
        #sendMsgBtn {
            color: #000!important;
        }
    </style>
</head>

<body>
    <div id="send">
        <header class="mui-bar mui-bar-nav">
            <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
						<font class="mui-icon mui-icon-arrowleft"></font>
				</button>
            <h1 class="mui-title">发布视频</h1>
            <span class="fr" id="sendMsgBtn">确认</span>
        </header>
        <div class="bg_f">
            <textarea id="msgcontent" placeholder="这一刻的想法......."></textarea>

            <div id="feedback" class="feedback">

                <video id="msgvideo" onclick="this.play()" type="video/mp4"></video>
                <div id="output">
                   
                </div>
                <div id='video-container' class="row image-list">
                </div>
            </div>
            <div class="title">(最多上传1个10秒视频)</div>
            <div class="sendtype">
                <div class="mui-card">
                    <form class="mui-input-group">
                        <div class="mui-input-row mui-radio">

                            <label>公开<span>所有人可见</span></label>
                            <input name="radio1" type="radio" checked="checked" />
                        </div>
                        <!--div class="mui-input-row mui-radio">
								
								<label>私密<span>仅发布到成长日记</span></label>
								<input id="privatea" name="radio1" type="radio" />
							</div-->
                    </form>
                </div>

            </div>
        </div>
        <div class="btnSend">
            <input type="hidden" id="msgtype" />
            <input type="hidden" id="sendtype" />
        </div>
        <div class="pad_30"></div>
    </div>

    <script src="../../js/mui.js"></script>
    <script src="../../js/app.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/token.js"></script>
   <!-- <script src='../../js/sendvideomsg.js'></script>-->
    <script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
    <!--<script src="../../js/vue.min.js"></script>-->
    <script>
        (function(){
			var video, output;
			var scale = 0.8;
			if(mui.os.android){
				var initialize = function() {
				output = document.getElementById("output");
				video = document.getElementById("msgvideo");
				
				video.addEventListener('progress',captureImage);// 用于向指定元素添加事件句柄。
				};
				  
				var captureImage = function() {
				            var canvas = document.createElement("canvas"); // 创建一个画布
				            canvas.width = 200;
				            canvas.height = 200;
				            canvas.getContext('2d').drawImage(video, 0 , 0 , 200, 200); // getContext:设置画布环境；drawImage:画画 
				            var img = document.createElement("img");
				            img.style.position='absolute';
				            img.src = canvas.toDataURL("image/png"); // 获取图片的url
				            output.appendChild(img);
				            document.getElementById('output').style.display='block';
				};  	
				initialize();
			}
				})();
			
			
            var self = '';
			mui.init();
			mui.plusReady(function() {
				self = plus.webview.currentWebview();
				var msgtype = self.msgtype;
				document.getElementById("msgtype").value = msgtype;
				mui.back = function(event) {
					plus.nativeUI.confirm("退出此次编辑?", function(e) {
						if(e.index == 0) {
							plus.webview.currentWebview().close();
						}
					}, "提醒", ["退出", "取消"]);
				};

				
				
				document.getElementById('output').addEventListener('tap',function(){
					this.style.display="none";
					document.getElementById('msgvideo').play();
					document.getElementById('msgvideo').style.display='block';
				})
			});

        
    </script>
</body>

</html>